<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>2-11</title>
		<!--   引入jQuery -->
		<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="../styles/selectstyle.css" />
		<script type="text/javascript">
			//<![CDATA[
			$(document).ready(function() {
				//1对表单内 可用input 赋值操作.http://blog.csdn.net/jiakw_1981/article/details/44590219
				//想知道为什么<a>和<input>里都需要加return false;,而<botton>里不需要吗?
				//因为<a>和<input>的onclick事件本身就包含了form.submit();,如果不加return false;那么实际上submit处理被调用了2次,如果debug的话可以看出来的!
				//而<botton>的onclick事件本身没有包含form.submit();,所以不需要追加return false;来控制2重调用!
				$("#btn1").click(function() {

					$("input:enabled").val("啊啊啊啊")
					return false;
				})


				//2对表单内 不可用input 赋值操作.

				$("#btn2").click(function() {

					$("input:disabled").val("啊啊啊啊")
					return false;
				})


				//3点击多选框时，找到索引值为0的div展示多选框选中的个数
				//文字内容为（有n个多选框被选中了），且加粗展示
				//使用:checked选择器，来操作多选框.

				function way() {
					$("div:eq(0)").html("共" + $("input:checked").length + "个被选中")
				}
				way()
				$(":checkbox").click(function() {
					(way())
				})
				//4点击下拉列表时，找到索引值为1的div展示每个下拉列表选中的文本信息展示
				//使用:selected选择器，来操作下拉列表.
				function select() {
					$("div:eq(1)").html($("select option:selected"))
				}
				select()
				$("option").click(function() {
					(select())
				})


				//重置表单元素


			});
			//]]>
		</script>
	</head>
	<body>
		<h3> 表单对象属性过滤选择器.</h3>
		<form id="form1" action="#">
			<button type="reset">重置所有表单元素</button>
			<br /><br />
			<button id="btn1">对表单内 可用input 赋值操作.</button>
			<button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />

			可用元素：<input name="add" value="可用文本框" id="textadd" /> <br />
			不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br />
			可用元素： <input name="che" value="可用文本框" /><br />
			不可用元素：<input name="name" disabled="disabled" value="不可用文本框" /><br />
			<br />
			多选框：<br />
			<input type="checkbox" name="newsletter" checked="checked" value="test1" />ADC
			<input type="checkbox" name="newsletter" value="test2" />辅助
			<input type="checkbox" name="newsletter" value="test3" />法师
			<input type="checkbox" name="newsletter" checked="checked" value="test4" />打野
			<input type="checkbox" name="newsletter" value="test5" />战士
			//展示多选框选中的个数
			<div></div>

			<br /><br />
			下拉列表ADC：<br />
			<select name="test" multiple="multiple" style="height:100px">
				<option>女警</option>
				<option selected="selected">金克斯</option>
				<option>EZ</option>
				<option selected="selected">奥巴马</option>
				<option>飞机</option>
				<option>寒冰</option>
			</select>

			<br /><br />
			下拉列表辅助：<br />
			<select name="test2">
				<option>宝石</option>
				<option>风女</option>
				<option selected="selected">机器人</option>
				<option>唤潮鲛姬</option>
				<option>众星之子</option>
				<option>琴女</option>
			</select>
			<br /><br />
			<div></div>
		</form>
	</body>
</html>
